<template>
  <el-row>
    <el-col :span="22" :offset="1">
      <el-button type="primary" @click="add">添加</el-button>
      <el-table
        :data="tableData"
        highlight-current-row
        ref="tab"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          label="图片">
          <template slot-scope="scope">
             <el-image :src="scope.row.img" style="width:100px;height:100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="排序">
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            {{scope.row.online==1? '显示':'不显示'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="270">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="goTo(scope.row.id,scope.row.title)">子分类</el-button>
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="info"
              @click="edit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="del(scope.row.id,scope.row.title)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
<!-- @current-change页码改变的时候会触发的事件,会自动传递页码 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="getTableDate"
        >
      </el-pagination>
    </el-col>
    <edit-cate ref="edit" @refresh="getTableDate"></edit-cate>
    <add-cate ref="add" @refresh="getTableDate"></add-cate>
  </el-row>
</template>

<script>
import AddCate from './addCate.vue'
import editCate from './editCate.vue'
export default {
  components: { editCate, AddCate },
    data(){
        return{
            tableData : [],
            total : 0,
            pageSize : 5,
            current : 1,
        }
    },
    mounted(){
        this.getTableDate()
    },
    methods:{
        getTableDate(page = 1){
            this.$http.get(`/cate/${page}/${this.pageSize}`).then(res =>{
                this.total = res.data.data.total
                this.tableData = res.data.data.data
                this.current = res.data.data.current
                this.pageSize = res.data.data.pageSize
            })
        },
        async del(id,title) {
          try {
            await this.$confirm(`确认要删除${title}吗?`, '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            const res = await this.$http.delete(`/cate/${id}`)
            if(res.data.code == 0){
              this.$message({
                  type: 'success',
                  message: '删除成功!'
              });
              this.getTableDate(this.current)
            }
          } catch (err) {
            this.$message({
                type: 'info',
                message: '已取消删除'
              });  
          }
        },
        edit(obj){
          this.$refs.edit.iseditUserDialog = true
          this.$refs.edit.gridCategory = obj
          obj.online == 1? this.$refs.edit.gridCategory.online = true : this.$refs.edit.gridCategory.online = false
          this.$refs.edit.current = this.current
        },
        add(){
          this.$refs.add.isaddUserDialog = true
        },
        goTo(id,name){
          this.$router.push({
            path :'/category/sub-category',
            query : {id:id,name:name}
          })
        }
    }
}
</script>

<style>

</style>